<template>
  <ElContainer style="height: 100%">
    <ElMain>
      <ElRow :gutter="40" justify="center" center="center">
        <ElCol :span="5">
          <ElCard
            :body-style="{ cursor: 'pointer', textAlign: 'center' }"
            shadow="hover"
            @click="handleButtonClick('personal')"
          >
            <div style="line-height: 40px">
              <ElIcon>
                <Search />
              </ElIcon>
            </div>
            <div style="line-height: 80px">个人档案</div>
          </ElCard>
        </ElCol>
        <ElCol :span="5">
          <ElCard
            shadow="hover"
            @click="handleButtonClick('family')"
            :body-style="{ cursor: 'pointer', textAlign: 'center' }"
          >
            <div style="line-height: 40px">
              <ElIcon>
                <Grid />
              </ElIcon>
            </div>
            <div style="line-height: 80px">家庭档案</div>
          </ElCard>
        </ElCol>
        <ElCol :span="5">
          <ElCard
            shadow="hover"
            @click="handleButtonClick('health')"
            :body-style="{ cursor: 'pointer', textAlign: 'center' }"
          >
            <div style="line-height: 40px">
              <ElIcon>
                <Grid />
              </ElIcon>
            </div>
            <div style="line-height: 80px">健康信息</div>
          </ElCard>
        </ElCol>
        <ElCol :span="5">
          <ElCard
            shadow="hover"
            @click="handleButtonClick('archives')"
            :body-style="{ cursor: 'pointer', textAlign: 'center' }"
          >
            <div style="line-height: 40px">
              <ElIcon>
                <Grid />
              </ElIcon>
            </div>
            <div style="line-height: 80px">档案查询</div>
          </ElCard>
        </ElCol>
      </ElRow>
    </ElMain>
  </ElContainer>
  <MyDialog
    v-bind="personalArchiveDialog"
    v-model:visible="personalArchiveDialog.visible"
  >
    <PersonalArchives
      ref="personalArchiveRef"
      :card-id="medicalUser?.certNumber"
    />
  </MyDialog>
  <MyDialog
    v-bind="familyArchiveDialog"
    v-model:visible="familyArchiveDialog.visible"
  >
    <FamilyArchives ref="familyArchivesRef" />
  </MyDialog>
  <MyDialog
    v-bind="archivesListDialog"
    v-model:visible="archivesListDialog.visible"
  >
    <ArchiveList :card-id="medicalUser?.certNumber" />
  </MyDialog>

  <MyDialog
    v-bind="healthInfoDialog"
    v-model:visible="healthInfoDialog.visible"
  >
    <HealthArchives
      ref="healthRef"
      v-if="personalArchive"
      :personal-archive="personalArchive"
    />
  </MyDialog>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import PersonalArchives from "./PersonalArchives/index.vue";
import FamilyArchives from "./FamilyArchives/index.vue";
import ArchiveList from "./ArchivesList/index.vue";
import HealthArchives from "./HealthArchives/index.vue";
import useMedicalUser from "@/hooks/useMedicalUser";
import { ElMessage, ElMessageBox } from "element-plus";
import { getProfilesInfoByCardId, saveProfiles } from "@/api/archives";
import useMyDialog from "@/components/MyDialog/useMyDialog";
const { medicalUser } = useMedicalUser();

const personalArchiveRef = ref<InstanceType<typeof PersonalArchives>>();
const personalArchiveDialog = useMyDialog({
  visible: false,
  title: "个人档案",
  showConfirmBtn:false,
  handleConfirmClick: async () => {
    try {
      await personalArchiveRef.value?.save();
      personalArchiveDialog.visible = false;
    } catch (e) {}
  },
});

// 家庭档案弹框
const familyArchivesRef = ref<InstanceType<typeof FamilyArchives>>();
const familyArchiveDialog = useMyDialog({
  title: "家庭档案",
  visible: false,
  showConfirmBtn:false,
  handleConfirmClick: async () => {
    const data = await familyArchivesRef.value?.save();
    if (data) {
      familyArchiveDialog.visible = false;
    }
  },
});

// 档案查询
const archivesListDialog = useMyDialog({
  visible: false,
  title: "档案查询",
  showConfirmBtn:false,
  handleConfirmClick: async () => {
    archivesListDialog.visible = false;
  },
});
// 个人健康档案

const handleButtonClick = (data: string) => {
  console.log(medicalUser.value);
  if (!medicalUser.value?.certNumber) {
    if (data !== "archives") {
      ElMessage({
        message: "请体检人先登录",
        type: "error",
      });
      return;
    }
  }
  switch (data) {
    case "personal":
      personalArchiveDialog.visible = true;
      break;
    case "family":
      familyArchiveDialog.visible = true;
      break;
    case "health":
      healthInfo();
      break;
    case "archives":
      archivesListDialog.visible = true;
      break;
  }
};

const healthRef = ref<InstanceType<typeof HealthArchives>>();
const healthInfoDialog = useMyDialog({
  visible: false,
  title: "个人健康档案",
  handleConfirmClick: async () => {
    const data: any = await healthRef.value?.save();
    healthInfoDialog.visible = false;
  },
});
const personalArchive = ref();
const healthInfo = async () => {
  //TODO:先检查有没有个人档案
  try {
    const data = await getProfilesInfoByCardId(medicalUser.value?.certNumber);
    personalArchive.value = data;
    healthInfoDialog.visible = true;
  } catch (e) {
    ElMessageBox.confirm(
      `<div>
          <div>姓名：${medicalUser.value?.partyName}</div>
          <div>性别：${medicalUser.value?.gender === 1 ? "男" : "女"}</div>
          <div>身份证号：${medicalUser.value?.certNumber}</div>
          </div>`,
      "用户不存在，是否添加?",
      {
        dangerouslyUseHTMLString: true,
      }
    )
      .then(async () => {
        try {
          await saveProfiles({
            a00_03_10: medicalUser.value?.certNumber,
            a00_03_05: medicalUser.value?.partyName,
            a00_03_07: medicalUser.value?.gender === 1 ? "1" : "2",
          });
        } catch (e) {}
      })
      .catch(() => {});
    // ElMessageBox.confirm()
    // ElMessage.error("未查询到个人档案信息，请先创建个人档案");
  }
};
</script>
<style scoped lang="scss"></style>
